<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#js{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			/*
				通过js修改css的样式
					语法
						元素.style.样式名 = 样式值
					注意在css中含有减号在js中时不合法的
					需要将这种样式名修改为驼峰命名法
						去掉减号然后将-后面的字母大写
				通过js设置的属性都是内联样式
					而内联样式的优先级比较高，通过js修改的样式往往会立即显示
				但是如果在样式中写了！important，此时样式会有最高优先级
					即使通过js也不能覆盖该样式，导致js修改样式失效
					所以尽量不要为样式添加！important
				通过js读取的属性也是内联样式，无法读取样式表中的样式	
				获取元素的当前显示的样式
					元素.currentStyle.样式
					如果不设置样式，他将会返回默认值（只有ie浏览器支持）
				在其他浏览器中读取元素当前的显示样式
					getComputedStyle()这个方法来获取元素的当前的样式
					这个方法时window的方法可以直接使用
					需要两个参数
						第一个参数，获取样式的元素
						第二个参数，可以传递一个伪元素，一般都船null
					该方法会返回一个对象，对象中封装了当前元素对应的样式
					getComputedStyle(box1,unll).width
					如果获取的样式没有设置，则获取真实的值，而不是默认值
					但是该方法不支持ie8及其以下的浏览器
					该方法时只读的不能修改
				如果我们像兼容所有的浏览器
				function getStyle(obj,name){
						if(getComputedStyle){
							return getComputedStyle(obj,null)[name];
						}else{
							return boj.currentStyle[name];
						}
					}
				样式操作属性
					clientWidth
					clientHeight
						-这两个属性可以获取元素的可见高度和欢度
						-这些属性都是不带px的，返回一个数字，可以直接进行计算
						-会获取元素的宽度和高度，包括内容区和内边距
						-这些属性都是只读的不可以修改
					offsetWidth
					offsetHeight
						-可以获取元素的整个宽度和高度，包括边框和内容、边距
					offsetParent
						-获取当前元素的定位父元素
						-获取到当前元素最近的开启了定位的祖先元素
						-如果所有的祖先元素都没有定位那么就会返回body
					offsetLeft
						-相当于相对定位的父元素的水平偏移量
					offsetTop
						-相当于相对定位的父元素的垂直偏移量
					scrollWidth
					scrollHeight
						-可以获取滚动的高度和宽度(滚动条那种)
					scrollLeft
					scrollTop
						-可以获取滚动条滚动的距离(水平和垂直)
						-当满足scrollHeight - scrollTop == clientHeight
							说明滚动条滚动到了底部
					
						
					
			*/
		   window.onload = function(){
				var js =document.getElementById("js");
				alert(js.constructor.width);
		   }
		   js.offsetWidth
		</script>
	</head>
	<body>
		<div id="js"></div>
	</body>
</html>
